import React from 'react'
import { Table, Tag, Space, Button, Cascader, message } from 'antd'
import {} from 'antd'
import { uploadTestPaperModel } from '../../api/test'

// import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
function textquestionManage() {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <Button>{text}</Button>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green'
            if (tag === 'loser') {
              color = 'volcano'
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            )
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button>Invite {record.name}</Button>
          <Button>Delete</Button>
        </Space>
      ),
    },
  ]

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ]
  const options = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
            {
              value: 'xiasha',
              label: 'Xia Sha',
              disabled: true,
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua men',
            },
          ],
        },
      ],
    },
  ]
  const UploadFile = (e) => {
    const fileName = e.target.files[0] //获得文件对象
    // console.log(fileName)
    if (fileName !== undefined) {
      const file_typename = fileName.name.substring(
        //筛选出上传文件的后缀
        fileName.name.lastIndexOf('.')
      )
      // console.log(file_typename)
      // console.log(fileName)
      if (file_typename === '.xlsx' || file_typename === '.xls') {
        var form = new FormData() // FormData 对象
        form.append('file', fileName) // 文件对象
        // console.log(form)
        uploadTestPaperModel(form).then((res) => {
          if (res.data.code === 200) {
            message.success('上传成功')
          }
        }) //后端通过multer模块接受文件对象
      } else {
        message.warning('请选择正确的文件类型')
        // console.log('请选择正确的文件类型！')
      }
    } else {
      message.error('请选择正确的文件！')
      // console.log('请选择正确的文件！')
    }
  }

  function onChange(value, selectedOptions) {
    console.log(value, selectedOptions)
  }
  const downloadTestModel = () => {
    window.open('http://10.20.159.78:3333/api/test/exportTestPaperModel')
  }
  function filter(inputValue, path) {
    return path.some(
      (option) =>
        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
    )
  }
  return (
    <div>
      <div className="searchSelect">
        <Cascader
          options={options}
          onChange={onChange}
          placeholder="选择需要查看的分类"
          showSearch={{ filter }}
          style={{ float: 'left' }}
        />
        <Button type="primary" style={{ float: 'left' }}>
          查询
        </Button>
        <div style={{ float: 'left', marginLeft: '60px' }}>
          <input type="file" onChange={(e) => UploadFile(e)} />
        </div>
        <div style={{ float: 'left', marginLeft: '60px' }}>
          <Button type="primary" onClick={downloadTestModel}>
            点击下载试题模板
          </Button>
        </div>
      </div>
      <div className="tableShow">
        <Table columns={columns} dataSource={data} />
      </div>
    </div>
  )
}

export default textquestionManage
